<template>
    <div>
        <el-card>
            <template #header>
                <div class="card-header flex justify-between">
                    <span>{{ $route.meta.title }}</span>
                    <el-button type="primary" @click="handleEdit('add')">新增</el-button>
                </div>
            </template>


            <el-table :data="pageData.lists" :default-expand-all="true" row-key="id" size="large"
                v-loading="pageData.loading" style="width: 100%">
                <el-table-column prop="id" label="ID" width="80" type="" />
                <el-table-column prop="name" label="名称" />
                <el-table-column prop="icon" label="图标" width="80" align="center">
                    <template #default="{ row }">
                        <Icon :name="row.icon" size="24" class="flex items-center justify-center" />
                    </template>
                </el-table-column>

                <el-table-column prop="type" label="类型" width="80" align="center">
                    <template #default="{ row }">
                        <el-tag v-if="row.type === MenuType.CATALOG" type="success">目录</el-tag>
                        <el-tag v-if="row.type === MenuType.MENU" type="warning">菜单</el-tag>
                        <el-tag v-if="row.type === MenuType.BUTTON" type="danger">按钮</el-tag>
                    </template>
                </el-table-column>

                <el-table-column prop="component" label="组件地址" width="240" />
                <el-table-column prop="path" label="路由地址" width="220" />

                <el-table-column fixed="right" label="管理员操作">
                    <template #default="scope">
                        <el-button type="primary" v-if="scope.row.type !== MenuType.BUTTON" size="small"
                            @click="handleEdit('add', { parentid: scope.row.id, type: scope.row.type == 3 ? scope.row.type : scope.row.type + 1 })">新增子级</el-button>

                        <el-button type="primary" size="small" @click="handleEdit('edit', scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>

                <template #empty>
                    <el-empty description="还未添加任何权限" />
                    <el-button type="primary" @click="handleEdit('add')">添加权限</el-button>
                </template>
            </el-table>
            <!-- <Pagination v-if="pageData.total > 0" v-model:modelValue="pageData" @change="requestData" /> -->

        </el-card>

        <Edit ref="editComponent" :lists="pageData.lists" @success="requestData" />

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getPermissionList } from '@/api/system/rbac/permission'
import { usePaging } from '@/utils/hooks/usePaging'
import { onMounted } from 'vue'
import Edit from './components/edit.vue'
import { MenuType } from '@/utils/enums/appEnums'
const editComponent = ref<InstanceType<typeof Edit>>()



const showEditDialog = ref(false)
const searchForm = ref({
    pageType: 1
})
const { pageData, requestData } = usePaging({
    fetchFunc: getPermissionList,
    params: searchForm.value
})

const handleEdit = (type: 'edit' | 'add', row?: any) => {
    showEditDialog.value = true
    editComponent.value?.open(type)
    editComponent.value?.setFormData(row)
}

onMounted(() => {
    requestData()
})
</script>
<style scoped lang="scss"></style>
